<template>
	<div>
		<el-table
			:data="tableData"
			@selection-change="selectHandle"
			:row-class-name="rowColor"
			style="width: 100%"
			:border="true"
		>
			<el-table-column type="selection" width="55" />
			<!-- <el-table-column prop="id" label="id" sortable /> -->
			<el-table-column prop="mapName" label="地图" sortable />
			<el-table-column prop="bossName" label="怪物" sortable />
			<el-table-column prop="countdown" label="倒计时" sortable>
				<template slot-scope="scope">
					<i class="el-icon-time" />
					<span @click="handleModifyCountdown(scope.row)">
						{{ parseInt(scope.row.countdown / 3600) }}:{{
							parseInt((scope.row.countdown % 3600) / 60)
						}}:{{ parseInt(scope.row.countdown % 60) }}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="lastDeath" label="上次死亡时间" sortable>
				<template slot-scope="scope">
					<!-- <span @click="$emit('edit', scope.row)">
						{{ scope.row.lastDeath.format('MM/DD HH:mm:ss') }}</span
					> -->
					<span @click="handleModifyExprience(scope.row)">
						{{ scope.row.lastDeath.format('MM/DD HH:mm:ss') }}</span
					>
				</template>
			</el-table-column>
			<el-table-column prop="rebornCycle" label="重生周期" sortable>
				<template slot-scope="scope">
					<span @click="handleModifyRebornCycle(scope.row)">
						{{ scope.row.rebornCycle / 60 }} min
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="nextReborn" label="下次复活" sortable>
				<template slot-scope="scope">
					<i class="el-icon-time" />
					<span style="margin-left: 10px">
						{{ scope.row.nextReborn.format('MM/DD HH:mm:ss') }}
					</span>
				</template>
			</el-table-column>
			<!-- <el-table-column label="操作">
				<template slot-scope="scope">
					<el-button
						type="primary"
						@click="$emit('edit', scope.row)"
						icon="el-icon-edit"
						circle
					></el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<!-- the share dialog for modify the cycle info -->
		<el-dialog title="重生周期" :visible.sync="rebornCycleDialog.visible" width="30%">
			<span>请修改重生周期(分钟为单位)</span>
			<el-input
				v-model="rebornCycleDialog.boss.rebornCycle"
				style="margin-top: 40px"
				placeholder="单位为分钟"
			/>
			<span slot="footer" class="dialog-footer">
				<el-button @click="rebornCycleDialog.visible === false">取 消</el-button>
				<el-button type="primary" @click="ModifyRebornCycle">确 定</el-button>
			</span>
		</el-dialog>
		<!-- rest time -->
		<el-dialog title="倒计时" :visible.sync="countdownDialog.visible" width="30%">
			<span>倒计时是多少(分钟为单位)？</span>
			<el-input
				v-model="countdownDialog.boss.countdown"
				style="margin-top: 40px"
				placeholder="单位为分钟"
			/>
			<span slot="footer" class="dialog-footer">
				<el-button @click="countdownDialog.visible = false">取 消</el-button>
				<el-button type="primary" @click="modifyCountdown">确 定</el-button>
			</span>
		</el-dialog>
		<!-- experience -->
		<el-dialog title="死了多久？" :visible.sync="exprienceDialog.visible" width="30%">
			<span>死了多久？(分钟为单位)？</span>
			<el-input
				v-model="exprienceDialog.boss.exprience"
				style="margin-top: 40px"
				placeholder="单位为分钟"
			/>
			<span slot="footer" class="dialog-footer">
				<el-button @click="exprienceDialog.visible = false">取 消</el-button>
				<el-button type="primary" @click="modifyExprience">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import http from '../interactive/index.js'
export default {
	name: 'BossTable',
	props: ['tipsTime'],
	data() {
		return {
			tableData: [
				// {
				// 	mapName: "",
				// 	bossName: "",
				// 	rebornCycle: "",
				// 	lastDeath: "",
				// 	nextReborn: this.$dayjs(),
				// 	countdown: "",
				// },
			],
			selectedId: [],
			now: this.$dayjs(),
			rebornCycleDialog: {
				visible: false,
				boss: {
					countdown: null,
				},
			},
			countdownDialog: {
				visible: false,
				boss: { countdown: null },
			},
			// how long has died
			exprienceDialog: {
				visible: false,
				boss: {
					exprience: null,
				},
			},
		}
	},
	mounted() {
		this.update()
		this.timer = setInterval(() => {
			this.updateCountdown()
		}, 1e3)
	},
	methods: {
		update() {
			this.$http('/api/boss/list')
				.then((res) => {
					if (res.data.status === 200) {
						res.data.result.forEach((boss) => {
							boss.lastDeath = this.$dayjs(boss.lastDeath)
							boss.nextReborn = boss.lastDeath
							boss.rebornCycle = parseInt(boss.rebornCycle)
							boss.countdown = 0
						})
						this.tableData = res.data.result
					} else {
						this.$message.error('服务器失联')
					}
				})
				.catch((e) => {
					console.error(e)
					this.$message.error('服务器失联')
				})
		},
		updateCountdown() {
			this.now = this.$dayjs()
			this.tableData.forEach((boss) => {
				boss.exprience = (this.now.unix() - boss.lastDeath.unix()) % boss.rebornCycle
				boss.countdown = boss.rebornCycle - boss.exprience
				boss.nextReborn = this.$dayjs.unix(boss.countdown + this.now.unix())
				boss.lastDeath = this.$dayjs.unix(boss.nextReborn.unix() - boss.rebornCycle)
				// console.log(boss.lastDeath.format())
				// console.log(this.now.unix() - boss.lastDeath.unix())
				// console.log(`${boss.exprience / 60}+${boss.countdown / 60}=${boss.rebornCycle / 60}`)
			})
			this.tableData.sort((a, b) => a.countdown - b.countdown)
		},
		selectHandle(selected) {
			this.selectedId = selected.map((e) => parseInt(e.id))
		},
		deleteBoss() {
			this.$http({
				url: '/api/boss/boss',
				method: 'delete',
				data: { id: this.selectedId },
			}).then((res) => {
				if (res.data.status === 200) {
					this.$message.success('删除成功')
				} else {
					this.$message.error('删除失败')
				}
				this.update()
			})
		},
		rowColor(row, _) {
			if (row.row.countdown < this.tipsTime) {
				document.getElementById('audio').play()
			}
			// 5分钟内报警
			if (row.row.countdown < 600) {
				return 'comming-soon-row'
				// 刚刷新
			} else if (row.row.rebornCycle - row.row.countdown < 600) {
				return 'just-expired-row'
			}
		},
		switchTimer(flag) {
			if (flag) {
				this.update()
				this.timer = setInterval(() => {
					this.updateCountdown()
				}, 1e3)
			} else {
				clearInterval(this.timer)
			}
		},
		handleModifyRebornCycle(row) {
			this.rebornCycleDialog.boss = JSON.parse(JSON.stringify(row))
			this.rebornCycleDialog.boss.rebornCycle = Math.floor(row.rebornCycle / 60)
			this.rebornCycleDialog.visible = true
		},
		ModifyRebornCycle() {
			this.rebornCycleDialog.visible = false
			// convent min to sec
			this.rebornCycleDialog.boss.rebornCycle *= 60
			http.modifyboss(this.rebornCycleDialog.boss).then((res) => {
				if (res.data.status === 200) {
					this.$message.success('修改成功')
				} else {
					this.$message.error('修改失败')
				}
				this.update()
			})
		},
		handleModifyCountdown(row) {
			this.countdownDialog.boss.id = row.id
			this.countdownDialog.boss.rebornCycle = row.rebornCycle
			this.countdownDialog.boss.countdown = null
			this.countdownDialog.visible = true
		},
		modifyCountdown() {
			let boss = JSON.parse(JSON.stringify(this.countdownDialog.boss))
			// now - lastDeath = cycle - countdown
			// now - cycle + countdown = lastDeath
			boss.lastDeath = this.$dayjs
				.unix(this.$dayjs().unix() - boss.rebornCycle + parseInt(boss.countdown) * 60)
				.format('YYYY/MM/DD HH:mm:ss')
			http.modifyboss(boss).then((res) => {
				if (res.data.status === 200) {
					this.$message.success('修改成功')
				} else {
					this.$message.error('修改失败')
				}
				this.countdownDialog.visible = false
				this.update()
			})
		},
		handleModifyExprience(row) {
			this.exprienceDialog.boss.id = row.id
			this.exprienceDialog.visible = true
		},
		modifyExprience() {
			let boss = this.exprienceDialog.boss
			boss.lastDeath = this.$dayjs.unix(this.$dayjs().unix() - boss.exprience * 60)
			http.modifyboss(boss).then((res) => {
				if (res.data.status === 200) {
					this.$message.success('修改成功')
				} else {
					this.$message.error('修改失败')
				}
				this.exprienceDialog.visible = false
				this.update()
			})
		},
	},
}
</script>
<style>
.el-table .comming-soon-row {
	background: #e6a23c;
}
.el-table .just-expired-row {
	background: #f56c6c;
}
</style>
